<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="pie">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Pie Plot</title>
  <style type="text/css">
    #canvas .g2-tooltip {
      position:absolute;
      visibility:hidden;
      border-style:solid;
      white-space:nowrap;
      z-index:9999999;
      transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      background-color:rgb(255, 255, 255);
      border-width:1px;
      border-color: #999;
      border-radius:4px;
      color: #444;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      font-stretch:normal;
      font-size:14px;
      font-family:sans-serif;
      line-height:21px;
      padding:5px;
    }

    #canvas .g2-tooltip-list {
      margin: 5px ;
      list-style-type:none;
      padding:0;
    }

    #canvas .g2-legend {
      height: 200px!important;
      top: 50%!important;
      margin-top: -100px;
    }
  </style>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const data = [
      { country: 'Lithuania', litres: 501.9 },
      { country: 'Czech Republic', litres: 301.9 },
      { country: 'Ireland', litres: 201.1 },
      { country: 'Germany', litres: 165.8 },
      { country: 'Australia', litres: 139.9 },
      { country: 'Austria', litres: 128.3 },
      { country: 'UK', litres: 99 },
      { country: 'Belgium', litres: 60 },
      { country: 'The Netherlands', litres: 50 }
    ];

    const ds = new DataSet();
    const dv = ds.createView()
      .source(data)
      .transform({
        type: 'percent',
        field: 'litres',
        dimension: 'country',
        as: 'percent'
      });

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: [ 20, 200, 20, 20 ]
    });
    chart.source(dv, {
      percent: {
        formatter: val => {
          val = (val * 100).toFixed(2) + '%';
          return val;
        }
      },
      nice: false
    });
    chart.coord('theta', {
      innerRadius: 0.3,
      radius: 0.95
    });
    chart.tooltip({
      showTitle: false, // 不展示 tooltip
      containerTpl: '<div class="g2-tooltip"><ul class="g2-tooltip-list"></ul></div>',
      itemTpl: '<li data-index={index}><span style="color:{color}">{name}:</span>{value}</li>'
    });
    chart.legend({
      useHtml: true,
      position: 'right',
      containerTpl: '<div class="g2-legend">' +
        '<table class="g2-legend-list"></table>' +
        '</div>',
      itemTpl: (value, color, checked, index) => {
        const obj = dv.rows[index];
        checked = checked ? 'checked' : 'unChecked';
        console.log(value);
        return '<tr class="g2-legend-list-item item-' + index + ' ' + checked +
        '" data-value="' + value + '" data-color=' + color +
        ' >' +
        '<td width=120><i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:10px;background-color:' + color + ';"></i>' +
        '<span class="g2-legend-text">' + value + '</span></td>' +
        '<td style="text-align: right;">' + obj.litres + '</td>' +
        '</tr>';
      },
      offsetX: 15,
      'g2-legend': {
        position: 'absolute'
      },
      'g2-legend-list': {
        listStyleType: 'none',
        margin: 0,
        padding: 0
      },
      'g2-legend-list-item': {
        cursor: 'pointer',
        fontSize: '14px'
      }
    });
    chart.filter('country', val => {
      return val !== 'UK';
    });
    chart.intervalStack()
      .position('percent')
      .color('country', [ '#67b7dc', '#84b761', '#fdd400', '#cc4748', '#cd82ad', '#2f4074', '#448e4d', '#b7b83f', '#b9783f' ])
      .label('percent', {
        formatter: (val, item) => {
          return item.point.country + ': ' + val;
        }
      })
      .style({
        lineWidth: 2,
        stroke: '#fff'
      });
    chart.render();
    const canvas = chart.get('canvas');
    chart.on('interval:mouseenter', ev => {
      const shape = ev.shape;
      const coord = chart.get('coord');
      if (!shape.get('selected')) {
        if (!shape.get('_originAttrs')) {
          shape.set('_originAttrs', G2.Util.cloneDeep(shape.__attrs));
        }
        shape.attr('shadowBlur', 40);
        shape.attr('shadowColor', 'rgba(0, 0, 0, 0.3)');
        shape.attr('transform', [
          [ 't', -coord.getCenter().x, -coord.getCenter().y ],
          [ 's', 1.1, 1.1 ],
          [ 't', coord.getCenter().x, coord.getCenter().y ]
        ]);
        canvas.draw();
      }
    });
    chart.on('interval:mouseleave', ev => {
      const shape = ev.shape;
      if (!shape.get('selected') && shape.get('_originAttrs')) {
        shape.__attrs = shape.get('_originAttrs');
        shape.set('_originAttrs', null);
        canvas.draw();
      }
    });

  </script>
</body>

</html>
